import React from 'react';
import { createForm } from 'rc-form';
import { List, DatePicker, Button, InputItem,Picker   } from 'antd-mobile';
import axios from "axios";
import '../css/form-wash.css';

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
const utcOffset = new Date(now.getTime() - (now.getTimezoneOffset() * 60000));

axios.defaults.baseURL = '/app'
axios.defaults.headers.post['Content-Type'] = 'application/json';

const washCodes = [
  {
    label: '床单',
    value: 1,
  },
  {
    label: '衣服',
    value: 2,
  },
  {
    label: '其他',
    value: 3,
  },
];


class Test extends React.Component {
  originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
      category: props.category,
      code: props.code,
      modal: false,
      url: '',
      form:'',
      title:'123123123',
      en: false,
      show: false,
      date: now,
      time: now,
      utcDate: utcNow,
      customChildValue: null,
      visible: false,
      dpValue: now,
      idt: utcOffset.toISOString().slice(0, 10),
      washValue: 1,
      title:'',
    }
  }

  componentWillMount() {
    var url = "/memory/category/" + this.state.category + "/code/" + this.state.code;
    // axios.get(url).then(res => {
    //   console.log(res.data.data);
    //   this.setState({
    //     data: res.data.data,
    //   });
    // });
  }

  componentWillReceiveProps = (props) => {
    this.setState({
      category: props.category,
      code: props.code
    })
  }

  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error) => {
      if (!error) {
        console.log(this.props.form.getFieldsValue());
        var formData = JSON.stringify(this.props.form.getFieldsValue()); // 这里才是你的表单数据
        console.log(formData);
        axios.post('/wash/add/code/'+this.state.code, formData).then(function(response) {
            console.log('login success');
            console.log(response); 
            if(response.status == 200){
                var result = response.data;
                if(result.code == 0){
                  alert('添加成功');
                  window.location.reload();
                }
            }else{
              alert('网络异常');
            }
        }).catch(() => {
            this.loading = false
        })
      } else {
        console.log(error);
        alert('请完善信息');
      }
    });
  }

  onReset = () => {
    this.props.form.resetFields();
    setTimeout(() => console.log(this.state), 0);
  }
  validateIdp = (rule, date, callback) => {
    if (isNaN(Date.parse(date))) {
      callback(new Error('Invalid Date'));
    } else {
      const cDate = new Date(date);
      const newDate = new Date(+this.state.dpValue);
      newDate.setFullYear(cDate.getFullYear());
      newDate.setMonth(cDate.getMonth());
      newDate.setDate(cDate.getDate());
      // this.setState({ dpValue: newDate });
      setTimeout(() => this.props.form.setFieldsValue({ dp: newDate }), 10);
      callback();
    }
  }
  validateDatePicker = (rule, date, callback) => {
    if (date && date.getMinutes() !== 15) {
      callback();
    } else {
      callback(new Error('15 is invalid'));
    }
  }
  onChange = (value) => {
    this.setState({
      washValue:value
    });
    console.log(this.state.washValue)
    this.props.form.getFieldProps('washType', {
      value: value
    })
  }
  // onConfirm = (value) => {
  //   this.setState({
  //     washValue:value
  //   });
  //   console.log(this.state.washValue)
  //   this.props.form.getFieldProps('washType', {
  //     initialValue: value
  //   })
  // }

  render() {
    console.log("123123==="+this.state.washValue);
    const { getFieldProps, getFieldError } = this.props.form;
    return (<form className="form" onsubmit="return true">
     <List
        className="date-picker-list"
        renderFooter={() => getFieldError('dp') && getFieldError('dp').join(',')}
        >
        <InputItem
          {...getFieldProps('title', {
            initialValue: '又洗床单了',
          })}
          clear
          value='又洗床单了'
          onChange={(v) => { this.setState({title : v})}}
          onBlur={(v) => { this.setState({title : v})}}
        >标题</InputItem>
        <Picker 
            data={washCodes} 
            cols={1} 
            {...getFieldProps('washType', {
              initialValue: this.state.washValue,
              rules: [
                { required: true, message: 'Must select a Type' },
              ],
            })} 
          className="forss"
          // value={this.state.washValue}
          onChange={v => this.onChange(v)}
          onOk={v => this.onChange(v)}
          >
          <List.Item arrow="horizontal">分类</List.Item>
        </Picker>
        <DatePicker
          {...getFieldProps('washDate', {
            initialValue: this.state.dpValue,
            rules: [
              { required: true, message: 'Must select a date' },
              { validator: this.validateDatePicker },
            ],
          })}
        >
        <List.Item arrow="horizontal">日期</List.Item>
        </DatePicker>
        <List.Item>
          <Button type="primary" size="small" inline onClick={this.onSubmit}>Submit</Button>
        </List.Item>
      </List>
    </form>); 
  }
}

const FormWash = createForm()(Test);
export default FormWash;